<style lang="scss" scoped>
.bigBox {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    margin-bottom: 5px; // 10px * 0.5
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      font-size: 15px; // 30px * 0.5
      margin-left: 10px; // 20px * 0.5
    }
    .header-center {
      font-size: 13.5px; // 27px * 0.5
      font-weight: bolder;
    }
    .header-right {
      margin-right: 10px; // 20px * 0.5
    }
  }
  main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .nickname {
      width: 100%;
      height: 45px; // 90px * 0.5
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      input {
        width: 90%; // 90% * 0.5
        height: 30px; // 60px * 0.5
        border: none;
      }
      input::placeholder {
        color: #ccc;
      }
    }
  }
}
</style>

<template>
  <div class="bigBox">
    <header>
      <div class="header-left">
        <img @click="onClickLeft" src="@/assets/back_black.png" alt="" />
      </div>
      <div class="header-center">
        <p>设置昵称</p>
      </div>
      <div class="header-right">
        <van-button
          @click="tz"
          style="width: 100px; height: 50px; border-radius: 12px"
          size="small"
          type="primary"
          >完成</van-button
        >
      </div>
    </header>
    <main>
      <div class="nickname">
        <input v-model="values.nickName" type="text" placeholder="新昵称" />
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { defineComponent, ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { showNotify } from 'vant'
import { ElMessage } from 'element-plus'

const UserStore = useUserStore()
const rou = useRoute()
console.log(rou.query)
const router = useRouter()
const values = ref({
  nickName: '',
})

const tz = () => {
  const newNickName = values.value.nickName
  localStorage.setItem('nickname', newNickName)
  localStorage.setItem('userName', newNickName)

  ElMessage({
    message: '修改成功',
    type: 'success',
  })
  router.push('/userchild')
}

const onClickLeft = () => history.back()
</script>
